<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col class="main-content">
          <div class="breadcrumb-wrapper">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item >我的公司</el-breadcrumb-item>
              <el-breadcrumb-item>财务信息</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <rotate-message></rotate-message>
          <div>
            <div class="report-edit">
                <div class="balance-head">
                    <div class="balance-title">新增利润表</div>
                    <div class="balance-search">
                        <div class="balance-item">
                            报表时间：
                           <el-date-picker
                            v-model="information.rptDate"
                            type="month"
                            format="yyyy 年 MM 月"
                            value-format="yyyy-MM"
                            placeholder="选择报表时间">
                            </el-date-picker>
                            <div v-show="errorState" class="error-tip">请选择报表时间</div>
                        </div>
                        <div class="balance-item">
                            报表主体：
                           <el-select v-model="information.associationId" filterable>
                                <el-option
                                label="主体公司"
                                :value="0"></el-option>
                                <el-option
                                v-for="item in companyArr"
                                :key="item.id"
                                :label="item.associatedCompanyName"
                                :value="item.id">
                                </el-option>
                            </el-select>
                            <!-- <div v-show="errorState1" class="error-tip">请输入报表主体</div> -->
                        </div>
                        <div class="balance-item">
                            报表是否审计：
                           <el-select  v-model="information.isCheck">
                                <el-option label="是" value="y"></el-option>
                                <el-option label="否" value="n"></el-option>
                            </el-select>
                            <div v-show="errorState2" class="error-tip">请选择报表是否审计</div>
                        </div>
                        <div class="balance-item">
                            报表币种：
                           <el-select  v-model="information.currency">
                               <el-option
                                v-for="item in giveArr"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key">
                                </el-option>
                            </el-select>
                             <div v-show="errorState3" class="error-tip">请选择报表币种</div>
                        </div>
                        <div class="balance-item">
                            报表附件：
                           <el-upload
                            class="upload-demo"
                            :action="upLoadUrl"
                            :on-remove="handleRemove"
                            :show-file-list="false"
                            :on-success="handleFileSuccess">
                                <div class="btn">上传</div>
                            </el-upload>
                            <div class="file-name"><a style="color:#F8B100" :href="information.attachmentFile?information.attachmentFile.fileUrl:''">{{fileName}}</a></div>
                        </div>
                    </div>
                </div>
                <div class="balance-wrap">
                     <el-form :model="information" :rules="rules" ref="information" >
                        <div class="balance-line">
                            <el-form-item prop="totOperRev">
                                <div class="balance-item">
                                    <span>营业总收入：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.totOperRev" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="revenue">
                                <div class="balance-item">
                                    <span>其中：营业收入：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.revenue" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="totOperCost">
                                <div class="balance-item">
                                    <span>营业总成本：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.totOperCost" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="salesCost">
                                <div class="balance-item">
                                    <span>其中：营业成本：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.salesCost" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="taxesSurchargesOps">
                                <div class="balance-item">
                                    <span>营业税金及附加：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.taxesSurchargesOps" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="operatingExpense">
                                <div class="balance-item">
                                    <span>销售费用：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.operatingExpense" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="adminExpense">
                                <div class="balance-item">
                                    <span>管理费用：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.adminExpense" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="financeExpense">
                                <div class="balance-item">
                                    <span>财务费用：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.financeExpense" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="impairLossAssets">
                                <div class="balance-item">
                                    <span>资产减值损失：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.impairLossAssets" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="otherOperExp">
                                <div class="balance-item">
                                    <span>其他业务成本：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.otherOperExp" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="netIncOtherOps">
                                <div class="balance-item">
                                    <span>其他经营净收益：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.netIncOtherOps" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="taxesNetGainChgFv">
                                <div class="balance-item">
                                    <span>公允价值变动净收益：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.taxesNetGainChgFv" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="investmentIncome">
                                <div class="balance-item">
                                    <span>投资净收益：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.investmentIncome" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="incInvestAssocJvEntp">
                                <div class="balance-item">
                                    <span>对联营企业和合营企业的投资收益：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.incInvestAssocJvEntp" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="netGainFxTrans">
                                <div class="balance-item">
                                    <span>汇兑净收益：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.netGainFxTrans" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="operationProfit">
                                <div class="balance-item">
                                    <span>营业利润：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.operationProfit" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="nonOperationIncome">
                                <div class="balance-item">
                                    <span>营业外收入：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.nonOperationIncome" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="nonOperationExpense">
                                <div class="balance-item">
                                    <span>营业外支出：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.nonOperationExpense" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="netLossDispNoncurAsset">
                                <div class="balance-item">
                                    <span>非流动资产处置净损失：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.netLossDispNoncurAsset" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="beforeTaxProfit">
                                <div class="balance-item">
                                    <span>利润总额：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.beforeTaxProfit" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="tax">
                                <div class="balance-item">
                                    <span>所得税：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.tax" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="unconfirmedInvestLossIs">
                                <div class="balance-item">
                                    <span>未确认的投资损失：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.unconfirmedInvestLossIs" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="netProfit">
                                <div class="balance-item">
                                    <span>净利润：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.netProfit" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="minorityIntInc">
                                <div class="balance-item">
                                    <span>少数股东权益：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.minorityIntInc" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                            <el-form-item prop="npBelongtoParcomsh">
                                <div class="balance-item">
                                    <span>归属母公司股东的净利润：</span>
                                    <div  class="tip"><el-input type="number" v-model="information.npBelongtoParcomsh" placeholder="请输入数字，单位元"></el-input></div>
                                </div>
                            </el-form-item>
                        </div>
                     </el-form>
                     <div class="btns-bottom">
                        <div @click="confrimBtn('information')" class="btn">保存</div>
                       <div @click="$router.push('financialProfit')" class="btn-cancel">取消</div>
                     </div>
                </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js');
import VueRouter from 'vue-router'
export default {
  data() {
      var validateNum =  (rule, value, callback) => { 
        if (isNaN(value)){ return callback(new Error('请输入数字')); }
        var reg= /^(-?\d+)(\.\d{1,2})?$/
        if (!reg.test(value)){ return callback(new Error('请保留两位小数')); }
        callback();
    };
    return {
        href: '',
        active: 0,
        information:{
        'associationId':'',
        "adminExpense": '',
        "attachmentId": '',
        "beforeTaxProfit":'',
        "currency": '',
        "financeExpense":'',
        "grossProfit": '',
        "id": '',
        "impairLossAssets": '',
        "incInvestAssocJvEntp": '',
        "interestExpense": '',
        "investmentIncome": '',
        "isCheck": '',
        "minorityIntInc":'',
        "netGainFxTrans": '',
        "netIncOtherOps": '',
        "netLossDispNoncurAsset": '',
        "netProfit":'',
        "nonOperationExpense":'',
        "nonOperationIncome":'',
        "npBelongtoParcomsh": '',
        "operatingExpense": '',
        "operationProfit": '',
        "otherOperExp": '',
        "otherProfit": '',
        "revenue":'',
        "rptDate":'',
        "rptMaster": '',
        "salesCost": '',
        "tax": '',
        "taxesNetGainChgFv": '',
        "taxesSurchargesOps":'',
        "totOperCost":'',
        "totOperRev":'',
        "unconfirmedInvestLossIs": '',
        "userId": ''
    },
       giveArr:[],
       upLoadUrl:'',
       fileName:'',
    rules:{ 
        // totOperRev:[
        //    //  {required: true, message: '请输入营业总收入', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // totOperCost:[
        //     // {required: true, message: '请输入营业总成本', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // salesCost:[
        //     // {required: true, message: '请输入其中：营业成本', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // taxesSurchargesOps :[
        //      //{required: true, message: '请输入营业税金及附加', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        //  operatingExpense:[
        //     // {required: true, message: '请输入销售费用', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // adminExpense:[
        //    //  {required: true, message: '请输入管理费用', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // financeExpense:[
        //     // {required: true, message: '请输入财务费用', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // impairLossAssets:[
        //    //  {required: true, message: '请输入资产减值损失', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // otherOperExp:[
        //    //  {required: true, message: '请输入其他业务成本', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // netIncOtherOps:[
        //     {required: true, message: '请输入其他经营净收益', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // taxesNetGainChgFv:[
        //     // {required: true, message: '请输入公允价值变动净收益', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // investmentIncome:[
        //     // {required: true, message: '请输入投资净收益', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // incInvestAssocJvEntp:[
        //     // {required: true, message: '请输入对联营企业和合营企业的投资收益', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // netGainFxTrans:[
        //     // {required: true, message: '请输入汇兑净收益', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // operationProfit:[
        //    //  {required: true, message: '请输入营业利润', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // nonOperationIncome:[
        //      //{required: true, message: '请输入营业外收入', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // nonOperationExpense:[
        //     // {required: true, message: '请输入营业外支出', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // netLossDispNoncurAsset:[
        //     // {required: true, message: '请输入非流动资产处置净损失', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // beforeTaxProfit:[
        //     // {required: true, message: '请输入利润总额', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // tax:[
        //     // {required: true, message: '请输入所得税', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // unconfirmedInvestLossIs:[
        //    //  {required: true, message: '请输入未确认的投资损失', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // netProfit:[
        //     // {required: true, message: '请输入净利润', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // minorityIntInc:[
        //      //{required: true, message: '请输入少数股东权益', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
        // npBelongtoParcomsh:[
        //      //{required: true, message: '请输入归属母公司股东的净利润', trigger: 'change'  },
        //     {  validator: validateNum, trigger: 'change' }
        // ],
      },
      errorState:false,
      errorState1:false,
      errorState2:false,
      errorState3:false,
      id:'',
      companyArr:[]
    }
  },
  watch: {
     information:{//深度监听，可监听到对象、数组的变化
        handler(val, oldVal){
          let info = this.information;
          if(info.rptDate){
              this.errorState = false
          }
          if(info.rptMaster){
              this.errorState1 = false
          }
          if(info.isCheck){
              this.errorState2 = false
          }
          if(info.currency){
              this.errorState3 = false
          }
        },
        deep:true
    },
  },
  created() {
      for (let i in this.information) {
            this.information[i] = '0'
        }
      this.information.rptDate = '';
      this.information.isCheck = '';
      this.information.currency = '';
      this.information.userId = '';
      this.information.id = '';
      this.information.attachmentId = ''
     this.id = this.$router.currentRoute.query.id;
      let sessionId = common.getCookie('sessionId');
      this.upLoadUrl =CONSTANT.URL.BASE.ADMINUPLOAD+ '?sessionId='+sessionId;
      this.getIndustry()
      this.getInfo()
      this.findCurrentCompany()
  },
  components: {
    "menu-top": () => import("../../common/Menu-Top"),
    "menu-left": () => import("../../common/Menu-Left"),
    "rotate-message": () => import("../../common/rotate-message")
  },
  methods:{
    findCurrentCompany(){
        let  url = CONSTANT.URL.SYSTEM.FINDCURRENTCOMPANY,
            data = {},
            dataForm = {}
            common.requestAjax(url,data,dataForm,(res)=>{
            if(res.status == 200){
               this.companyArr = res.data.bussData;
            }else{
            
            }
        })
    },
      getInfo(){
            let  url = CONSTANT.URL.WEB.FINDUSERBASEDETAILBYID,
                data = {},
                dataForm = {userId:this.userId?this.userId:null}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    let info = res.data.bussData;
                    this.information.rptMaster= info.coreData&&info.coreData.companyName;
                    if(this.id){
                        this.getDetail()
                    }else{
                        this.information.associationId = this.$router.currentRoute.query.associationId
                    }
            }else{
                
                }
            })
        },
    linkTo(link,id){
        this.$router.push({path: link, query: {id: id}})
    },
    getDetail(){
            let url = CONSTANT.URL.SYSTEM.FINDPROFITDETAIL,
                data = { },
                dataForm = {
                    id:this.id
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    let data = res.data;
                    this.information= data.bussData
                    this.fileName = data.bussData.attachmentFile&&data.bussData.attachmentFile.fileName?data.bussData.attachmentFile.fileName:''
                }
            })
    },
    handleRemove(file, fileList) {      // 图片上传
        this.information.attachmentId = '';
    },       
    handleFileSuccess(res, file) {
            if(res.status == 200){
                let picItem = res.data.bussData;
                this.information.attachmentId = picItem.fileId;
                this.fileName = picItem.fileName;
            }
    },
    confrimBtn(formName){
        let info = this.information;
          if(!info.rptDate){
              this.errorState = true
              return;
          }
        //   if(!info.rptMaster){
        //       this.errorState1 = true
        //       return;
        //   }
          if(!info.isCheck){
              this.errorState2 = true
              return;
          }
          if(!info.currency){
              this.errorState3 = true
              return;
          }
        this.$refs[formName].validate((valid) => {
            if (valid) {
                for (let i in this.information) {
                    if(i!='attachmentId'&&i!='id'&&i!='userId'){
                        if(!this.information[i]){
                            this.information[i] = '0'
                        }
                    }
                }
                let url = CONSTANT.URL.SYSTEM.SAVEUSERFINANCEPROFIT;
                let param = JSON.stringify(this.information);
                common.requestAjax(url, param, null, res => {
                    if(res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                       this.$router.push(`financialProfit?userId=${this.information.associationId}`)
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                });
            } else {
                return false;
            }
            });
    },
    getIndustry(){
        let  url = CONSTANT.URL.BASE.DICTIONARY,
            data = {},
            dataForm = {codeType:'currency'}
            common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
            if(res.status == 200){
                this.giveArr= res.data.bussData
            }else{
            
            }
        })
    },
  }
};
</script>
<style lang="scss">

.report-edit{
    padding-bottom: 60px;
    margin-top: 30px;
    .el-form-item{
        margin-bottom: 0;
    }
    .balance-head{
         padding-top:30px;
         padding-left: 30px;
         background-color: #fff;
        .balance-title{
            font-size: 16px;
            color: #ED7018;
        }
        .balance-search{
            margin-top: 22px;
            overflow: hidden;
            .balance-item{
                position: relative;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #111;
                float: left;
                margin-right: 25px;
                margin-bottom: 30px;
                .error-tip{
                    position: absolute;
                    bottom: -74%;
                    left: 32%;
                    color: #f56c6c;
                    font-size: 12px;
                }
                .el-date-editor{
                    width: 165px;
                }
                .el-input{
                    width: 165px;
                }
                .el-select{
                    width: 145px;
                }
                .upload-demo{
                    display: inline-block;
                    .btn{   
                            display: inline-block;
                            width: 80px;
                            height: 30px;
                            margin-left: 0px;
                            background-color: #ED7018;
                            border-radius: 4px;
                            -webkit-border-radius: 4px;
                            font-size: 14px;
                            color: #fff;
                            text-align: center;
                            line-height: 30px;
                            margin-right: 0px;
                            cursor: pointer;
                            &:hover{
                                background-color: #ED9000;
                                transition:all .2s linear
                            } 
                        }
                }
            }
        }
    }
    .balance-wrap{
        background-color: #fff;
        padding-top:30px;
        padding-left: 30px;
        margin-top: 20px;
        overflow: hidden;
        .el-form{
            overflow: hidden;
        }
        .el-form-item__error{
            top: 67%;
            left: 40%;
        }
        .btns-bottom{
            overflow: hidden;
             margin-left: 30%;
             padding-bottom: 60px;
             margin-top: 40px;
            .btn{
                float: left;
                width: 126px;
                height: 40px;
                margin-left: 0px;
                background-color: #ED7018;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                font-size: 14px;
                color: #fff;
                text-align: center;
                line-height: 40px;
                margin-right: 0px;
                cursor: pointer;
                &:hover{
                    background-color: #ED9000;
                    transition:all .2s linear
                } 
            }
            .btn-cancel{
                float: left;
                width: 126px;
                height: 40px;
                margin-left: 0px;
                background-color: #fff;
                border: 1px solid #999;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                font-size: 14px;
                color: #fff;
                text-align: center;
                line-height: 40px;
                margin-right: 0px;
                cursor: pointer;
                color: #000;
                margin-left: 61px;
            }
        }
        .balance-line{
            width: 68%;
            float: left;
        }
        .balance-title{
            width: 35%;
            text-align: right;
            font-size: 16px;
            color: #ED7018;
            padding: 10px 0 20px 0;
        }
        .balance-item{
            font-size: 14px;
            color: #111;
            margin-bottom: 20px;
            
            span{
                display: inline-block;
                width:39%;
                text-align: right;
            }
            .tip{
                display: inline-block;
                width: 60%;
            }
        }
    }
}

a {
  color: inherit;
}

.main-content {
  background-color: #f5f5f5;
}

.breadcrumb-wrapper {
  margin-top: 29px;
}

main {
  position: relative;
  margin-top: 30px;
  background-color: #fff;
  padding-left: 37px;
  padding-top: 29px;
}

.tab {
  display: flex;
  height: 28px;
  padding-bottom: 18px;
}

.btn-group {
  position: absolute;
  right: 158px;
  top: 18px;
  display: flex;
  justify-content: flex-end;
  z-index: 999;
}

.btn-group>.btn {
  margin-left: 50px;
  height: 40px;
  width: 100px;
  color: #ffffff;
  border-radius: 6px;
  font-size: 18px;
  line-height: 42px;
  text-align: center;
  font-weight: 400;
}

.btn-group>.btn:first-child {
  background-color: rgb(225, 132, 73);
}

.btn-group>.btn:last-child {
  background-color: rgb(44, 53, 65);
}

.tab-item {
  position: relative;
  height: 17px;
  line-height: 17px;
  font-size: 17px;
  margin-right: 29px;
  font-weight: 500;
}

.tab-item.active {
  color: rgb(225, 132, 73);
}

.tab-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -11px;
  background-color: rgb(225, 132, 73);
}

.view {
  background-color: #ffffff;
  padding-left: 35px;
  padding-bottom: 35px;
}
</style>
